<template>
  <div style="height: 100%;" class="AssignPermission-page">
    <div class="left-area" style="position: rea">
      <dimension-org
        v-if="controlLevel == levelOrg"
        :tenant-code="tenantCode"
        :dimension-id="dimensionId"
        @change="onOrgChange"
      />
      <dimension-assign-role
        v-else-if="controlLevel == levelRole"
        :tenant-code="tenantCode"
        :dimension-id="dimensionId"
        @change="onRoleChange"
      />
      <dimension-assign-user
        v-else-if="controlLevel == levelUser"
        :tenant-code="tenantCode"
        :dimension-id="dimensionId"
        :dataStructType="dataStructType"
        @change="onUserChange"
      />
    </div>
    <div class="right-area">
      <FormBlock :title="$t('module.dataPermission.dataPermission')" direction="column">
        <assign-tree-dimension
          v-if="dataStructType == '1'"
          :ref="dimensionCode"
          :tenant-code="tenantCode"
          :dimension-id="dimensionId"
          :assignment-id="assignmentId"
          :dimension-code="dimensionCode"
          :control-level="controlLevel"
        />
        <AssignTreeDimensionNew
          v-else-if="controlLevel == levelUser && dataStructType == '99'"
          v-bind="$attrs"
          v-on="$listeners"
          :ref="dimensionCode"
          :tenantCode="tenantCode"
          :dimensionId="dimension.dimensionId || ''"
          :assignmentId="assignmentId"
          :dimensionCode="dimensionCode"
          :controlLevel="controlLevel"
          :userInfo="userInfo"
        />
        <assign-list-dimension
          v-else
          :ref="dimensionCode"
          :tenant-code="tenantCode"
          :assignment-id="assignmentId"
          :dimension-code="dimensionCode"
          :control-level="controlLevel"
        />
      </FormBlock>
    </div>
  </div>
</template>
<script>
import DimensionOrg from "./DimensionOrg.vue";
import DimensionAssignRole from "./DimensionAssignRole.vue";
import DimensionAssignUser from "./DimensionAssignUser.vue";
import AssignListDimension from "./AssignListDimension.vue";
import AssignTreeDimension from "./AssignTreeDimension.vue";
import AssignTreeDimensionNew from "./AssignTreeDimensionNew.vue";
import { CONTROL_LEVEL_ORG, CONTROL_LEVEL_ROLE, CONTROL_LEVEL_USER } from "./const.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  components: {
    DimensionOrg,
    DimensionAssignRole,
    DimensionAssignUser,
    AssignListDimension,
    AssignTreeDimension,
    AssignTreeDimensionNew
  },
  props: {
    tenantCode: { type: String, required: true },
    dimensionId: {
      type: String,
      default() {
        return "";
      }
    },
    dimensionCode: String,
    dataStructType: {
      type: String,
      default() {
        return "";
      }
    },
    ruleCode: {
      type: String,
      default() {
        return "";
      }
    },
    controlLevel: {
      type: Number,
      default() {
        return 0;
      }
    },
    dimension: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      searchForm: {
        tenantCode: this.tenantCode,
        policyCode: this.ruleCode
      },
      levelOrg: CONTROL_LEVEL_ORG,
      levelRole: CONTROL_LEVEL_ROLE,
      levelUser: CONTROL_LEVEL_USER,
      assignmentId: null,
      userInfo: {}
    };
  },
  created: function() {
    this.init();
  },
  methods: {
    init() {},
    onOrgChange(id) {
      this.assignmentId = id;
    },
    onRoleChange(id) {
      this.assignmentId = id;
    },
    onUserChange(userInfo) {
      this.assignmentId = userInfo?.id;
      this.userInfo = userInfo || {};
    },
  }
};
</script>
<style lang="less">
.AssignPermission-page {
  .right-area {
    .form-block .block-body {
      overflow: initial;
    }
  }
}
.dimension-tabs {
  // .ivu-tabs-nav {
  //   .ivu-tabs-tab-active {
  //     color: #ff6f4b;
  //     background-color: #fffdf0ef;
  //   }
  //   .ivu-tabs-tab-active:hover {
  //     color: #ff6f4b;
  //   }
  //   .ivu-tabs-tab:hover {
  //     color: #ff6f4b;
  //   }
  // }
  // .ivu-tabs-content-animated {
  //   height: calc(~"100% - 63px");
  // }
  .left-area {
    // display: inline-block;
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
    .ivu-select-dropdown {
      width: 97% !important;
    }
  }
  .right-area {
    display: inline-block;
    width: calc(~"60% - 8px");
    height: 100%;
    // border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
    margin-left: 8px;
  }
}
</style>
